<template>
  <div>
    <!-- 新建 -->
    <el-dialog
      title="选择治疗类型"
      :visible.sync="medicamentTypeShow"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="500px"
      top="40px"
      class="add"
      @close="closeAdd"
    >
      <el-form :inline="true" label-suffix="：" size="mini" :model="detail">

        <!-- <el-form-item label="治疗类型">
          <el-radio-group v-model="search.type">
            <el-radio label="">全部</el-radio>
            <el-radio :label="3">调剂</el-radio>
            <el-radio :label="4">治疗</el-radio>
          </el-radio-group>
        </el-form-item> -->

        <el-form-item label="治疗类型">
          <el-select v-model="detail.treatment" class="w300" placeholder="请选择">
            <el-option label="治疗" value="1" :disabled="disabledA.indexOf('1')>=0" />
            <el-option label="调理" value="2" :disabled="disabledA.indexOf('2')>=0" />
          </el-select>
        </el-form-item>

        <el-form-item label="剂型">
          <el-select
            v-model="detail.adjustment"
            class="w300"
            placeholder="请选择"
            @change="(val) => changeAdjustment( val)"
          >
            <el-option v-for="item in options.medicamentType" :key="item.id" :label="item.dictValue" :value="item.id" :disabled="disabledT.indexOf(item.id+'')>=0" />
          </el-select>
        </el-form-item>

        <!-- <el-form-item>
          <el-button type="primary" @click="getList('detail')">搜 索</el-button>
        </el-form-item> -->

      </el-form>
      <!-- <el-table
        :data="list"
        size="small"
        :cell-style="$style.cellStyle"
        :header-cell-style="$style.rowClass"
        @selection-change="handleSelectionChange"
      >
        <ElTableColumn type="selection" width="50" />
        <ElTableColumn label="剂型" prop="dictValue" />
        <ElTableColumn label="治疗类型" prop="dictSort" />

      </el-table> -->

      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="selectGoods">确 定</el-button>
        <el-button size="small" @click="closeAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dictsPullList } from '@/api/dictionaries';
class Detail {
  adjustment = '';
  treatment = '';
}
class Options {
  medicamentType = [];
  treatment = []
}
export default {
  name: 'MedicamentType',
  components: {
  },
  props: {
    typeList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      options: new Options(), // 选项
      detail: new Detail(), // 数据
      adjustmentL: [],
      treatmentL: [],
      medicamentTypeShow: true
    };
  },
  computed: {
    disabledA() {
      let disabledA = [];
      this.typeList.forEach(ele => {
        disabledA.push(ele.type + '');
      });
      return disabledA;
    },
    disabledT() {
      let disabledT = [];
      // this.typeList.forEach(ele => {
      //   disabledT.push(ele.dictId + '');
      // });
      return disabledT;
    }
  },

  mounted() {
    this.getOptions();
  },
  activated() { },
  methods: {
    async getOptions() {
      const { data } = await dictsPullList({
        dicTypes: ['medicamentType', 'cureType']
      });
      this.options.medicamentType = data.medicamentType;
      this.options.treatment = data.cureType;
    },
    changeAdjustment(e) {
      let that = this;
      that.adjustmentL = [];
      e.forEach(function(item) {
        that.options.medicamentType.forEach(function(val) {
          if (item == val.id) {
            that.adjustmentL.push(JSON.parse(JSON.stringify(val)));
          }
        });
      });
      this.getAdjustmentL();
    },
    getAdjustmentL() {
      this.adjustmentL.forEach(function(item) {
        item.type = 2;
        item.dictId = item.id;
      });
    },
    changeTreatment(e) {
      let that = this;
      that.treatmentL = [];
      that.detail.treatment.forEach(function(item) {
        that.options.medicamentType.forEach(function(val) {
          if (item == val.id) {
            that.treatmentL.push(JSON.parse(JSON.stringify(val)));
          }
        });
      });
      this.getTreatmentL();
    },
    getTreatmentL() {
      this.treatmentL.forEach(function(val) {
        val.type = 1;
        val.dictId = val.id;
      });
    },
    closeAdd() {
      this.$emit('closeAdd', false);
    },
    // 改变表格选中状态
    // handleSelectionChange(val) {
    //   this.idList = val.map(i => {
    //     return i;
    //   });
    // },
    selectGoods() {
      let list = [];
      // this.detail.treatment.forEach(ele => {
      //   this.detail.adjustment.forEach(value => {
      //     let item = {};
      //     item.type = ele;
      //     let index = this.options.medicamentType.findIndex(val => val.id === value);
      //     item.dictId = value;
      //     item.dictValue = this.options.medicamentType[index].dictValue;
      //     list.push(item);
      //   });
      // });
      if (!this.detail.treatment && this.detail.treatmen !== 0) {
        this.$message({
          message: '请先选择治疗类型',
          type: 'warning'
        });
        return;
      }
      if (!this.detail.adjustment) {
        this.$message({
          message: '请先选择剂型',
          type: 'warning'
        });
        return;
      }
      let index = this.options.medicamentType.findIndex(val => val.id === this.detail.adjustment);
      let item = {
        type: this.detail.treatment,
        dictId: this.detail.adjustment,
        dictValue: this.options.medicamentType[index].dictValue
      };
      list.push(item);
      console.log(list);
      // console.log(this.adjustmentL, this.treatmentL);
      // console.log(list);
      this.$emit('typeList', list);
      this.closeAdd();
    }
  }
};
</script>

<style lang="scss" scoped>
.add {
  ::v-deep.el-dialog {
    // height: calc(100vh - 80px);
    // overflow-y: auto;
  }
  ::v-deep.el-dialog__body {
    padding: 10px 20px;
  }
  ::v-deep.el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    width: 100%;
    .el-form-item__label {
      margin-left: 50px;
      min-width: 80px;
    }
  }
}
</style>
